<template>
	<view class="indexs">
		<view class="header header_wi" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img33.png'" mode="widthFix"></image></view>
					<view class="index_wenben">{{ $t('page_my_dingdan_qpj.Publish_evaluation') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;'">
			<view class="my_dingdan_qpl" style="padding-top:20rpx;">
				<view class="my_dingdan_qpl_item3">
					<text style="font-size: 32rpx;margin-bottom:20rpx" >{{ $t('page_my_dingdan_qpj.delivery_attitude') }}</text>
					<view class="my_dingdan_qpl_item3_cont">
						<view class="my_dingdan_qpl_item3_xing">
							<block v-for="(item, index) in arrlister4" :key="index"><image :src="imgUrl + item.img" @tap="dianjishijian4" :data-id="item.id"></image></block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="index_center" style="margin-top:30rpx;">
			<view class="my_dingdan_qpl" style="padding-top:20rpx;">
				<view class="my_dingdan_qpl_item3">
					<text style="font-size: 32rpx;margin-bottom:20rpx" >{{ $t('page_my_dingdan_qpj.pickup_attitude') }}</text>
					<view class="my_dingdan_qpl_item3_cont">
						<view class="my_dingdan_qpl_item3_xing">
							<block v-for="(item, index) in arrlister5" :key="index"><image :src="imgUrl + item.img" @tap="dianjishijian5" :data-id="item.id"></image></block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="index_center" style="margin-top:30rpx;">
			<view class="my_dingdan_qpl">
				<view class="my_dingdan_qpl_item1">{{ $t('page_my_dingdan_qpj.hint') }}</view>
				<view class="my_dingdan_qpl_item2">
					<!--                    <image :src="imgUrl + pinlunxinxi.line.image" mode="aspectFill"></image> -->
					<text>{{ pinlunxinxi.line.name }}</text>
				</view>
				<view class="my_dingdan_qpl_item3">
					<view class="my_dingdan_qpl_item3_cont">
						<text>{{ $t('page_my_dingdan_qpj.population') }}</text>
						<view class="my_dingdan_qpl_item3_xing">
							<block v-for="(item, index) in arrlister" :key="index"><image :src="imgUrl + item.img" @tap="dianjishijian" :data-id="item.id"></image></block>
						</view>
					</view>
					<view class="my_dingdan_qpl_item3_cont">
						<text>{{ $t('page_my_dingdan_qpj.speed') }}</text>
						<view class="my_dingdan_qpl_item3_xing">
							<block v-for="(item, index) in arrlister2" :key="index"><image :src="imgUrl + item.img" @tap="dianjishijian2" :data-id="item.id"></image></block>
						</view>
					</view>
					<view class="my_dingdan_qpl_item3_cont">
						<text>{{ $t('page_my_dingdan_qpj.service') }}</text>
						<view class="my_dingdan_qpl_item3_xing">
							<block v-for="(item, index) in arrlister3" :key="index"><image :src="imgUrl + item.img" @tap="dianjishijian3" :data-id="item.id"></image></block>
						</view>
					</view>
				</view>
				<view class="my_dingdan_qpl_item4">
					<textarea :placeholder="$t('page_my_dingdan_qpj.placeholder')" @input="beizhuFun" name="" id="" cols="30" rows="10"></textarea>
					<view class="my_dingdan_qpl_item4_list">
						<view class="my_dingdan_qpl_item4_cont" v-for="(item, index) in imgpath" :key="index">
							<image :src="item.file_path" mode="aspectFill"></image>

							<view class="my_dingdan_qpl_item4_cont_img"><image :src="imgUrl + '/dzx_img58.png'" @tap="sahnchu" :data-index="index"></image></view>
						</view>
						<view class="my_dingdan_qpl_item4_cont2" @tap="chooseImageTaps"><image :src="imgUrl + '/dzx_img59.png'"></image></view>
					</view>
				</view>
			</view>

			<view class="my_dingdan_qpl_item5">
				<view class="my_dingdan_qpl_item5_btns">
					<view class="my_dingdan_qpl_item5_btn" @tap="tijiao">{{ $t('page_my_dingdan_qpj.submit') }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();

let request = require('../../../utils/require');

export default {
	data() {
		return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,

			//总体
			shuliang: 0,

			arrlister: [
				{
					id: 1,
					img: 'dzx_img57.png'
				},
				{
					id: 2,
					img: 'dzx_img57.png'
				},
				{
					id: 3,
					img: 'dzx_img57.png'
				},
				{
					id: 4,
					img: 'dzx_img57.png'
				},
				{
					id: 5,
					img: 'dzx_img57.png'
				}
			],

			//速度
			shuliang2: 0,

			arrlister2: [
				{
					id: 1,
					img: 'dzx_img57.png'
				},
				{
					id: 2,
					img: 'dzx_img57.png'
				},
				{
					id: 3,
					img: 'dzx_img57.png'
				},
				{
					id: 4,
					img: 'dzx_img57.png'
				},
				{
					id: 5,
					img: 'dzx_img57.png'
				}
			],

			//服务
			shuliang3: 0,

			arrlister3: [
				{
					id: 1,
					img: 'dzx_img57.png'
				},
				{
					id: 2,
					img: 'dzx_img57.png'
				},
				{
					id: 3,
					img: 'dzx_img57.png'
				},
				{
					id: 4,
					img: 'dzx_img57.png'
				},
				{
					id: 5,
					img: 'dzx_img57.png'
				}
			],
			
			//送货员态度如何
			shuliang4: 0,
			
			arrlister4: [
				{
					id: 1,
					img: 'dzx_img57.png'
				},
				{
					id: 2,
					img: 'dzx_img57.png'
				},
				{
					id: 3,
					img: 'dzx_img57.png'
				},
				{
					id: 4,
					img: 'dzx_img57.png'
				},
				{
					id: 5,
					img: 'dzx_img57.png'
				}
			],
			
			//评价取货员态度如何
			shuliang5: 0,
			
			arrlister5: [
				{
					id: 1,
					img: 'dzx_img57.png'
				},
				{
					id: 2,
					img: 'dzx_img57.png'
				},
				{
					id: 3,
					img: 'dzx_img57.png'
				},
				{
					id: 4,
					img: 'dzx_img57.png'
				},
				{
					id: 5,
					img: 'dzx_img57.png'
				}
			],

			beizhu: '',

			//备注
			imgpath: [],

			//图片
			urlimg: app.globalData.urlimg,

			optionsid: '',

			pinlunxinxi: {
				line: {
					image: '',
					name: ''
				}
			}
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */ onLoad(options) {
		var that = this;
		console.log(options,89)
		that.optionsid = options.id
		that.optionstype = options.type
		that.pinlunxinxiFun();
		
	},
	onShow() {
		var that = this;
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {},
	methods: {
		tijiao() {
			var that = this;
			var tupian = [];

			for (var i = 0; i < that.imgpath.length; i++) {
				tupian.push(that.imgpath[i].file_id);
			}

			var xingji = {
				all: that.shuliang,
				speed: that.shuliang2,
				service: that.shuliang3,
				delivery_attitude: that.shuliang4,
				pickup_attitude: that.shuliang5,
				
			};
			var data = {
				order_id: that.optionsid,
				common_type :that.optionstype?that.optionstype:1,
				//订单ID
				content: that.beizhu,
				//备注信息
				uploaded: tupian,
				//图片数组
				star: xingji,
				//星级数组
				token: uni.getStorageSync('token')
				
			};
			request.post(`index.php?s=/api/comment/create&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					uni.showToast({
						title: res.data.data
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 0
						});
					}, 1000);
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},

		//备注
		beizhuFun(e) {
			console.log(e, 'e？？？？');
			this.beizhu = e.detail.value
		},

		//获取评论信息
		pinlunxinxiFun() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token'),
				id: that.optionsid
			};
			request.post(`index.php?s=/api/package/commentOrder&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					that.pinlunxinxi = res.data.data
				}
			});
		},

		//移除图片
		sahnchu(e) {
			var that = this;
			console.log(that.imgpath, 'e????????');
			var imgs = that.imgpath;
			imgs.splice(e.currentTarget.dataset.index, 1);
			console.log(imgs, 'imgs');
			that.imgpath = imgs
		},

		//上传图片
		//添加上传图片
		chooseImageTaps(e) {
			var that = this;
			uni.showActionSheet({
				itemList: ['从相册中选择', '拍照'],
				itemColor: '#00000',
				success: function(res) {
					if (!res.cancel) {
						if (res.tapIndex == 0) {
							that.chooseWxImage('album');
						} else {
							if (res.tapIndex == 1) {
								that.chooseWxImage('camera');
							}
						}
					}
				}
			});
		},

		// 图片本地路径
		chooseWxImage: function(type) {
			var that = this;
			var imgsPaths = that.imgs;
			uni.chooseImage({
				sizeType: ['original', 'compressed'],
				sourceType: [type],
				success: function(res) {
					console.log(res.tempFilePaths[0]);
					that.upImgs(res.tempFilePaths[0], 0); //调用上传方法
				}
			});
		},

		//上传服务器
		upImgs: function(imgurl, index) {
			var that = this;
			console.log(imgurl, 'imgurl');
			uni.uploadFile({
				url: app.globalData.url + 'index.php?s=/api/upload/image&wxapp_id=' + uni.getStorageSync('web_id') + '&token=' + uni.getStorageSync('token'),
				//
				filePath: imgurl,
				name: 'iFile',
				header: {
					'content-type': 'multipart/form-data'
				},
				formData: null,
				success: function(res) {
					console.log(JSON.parse(res.data), 'res');
					var datas = JSON.parse(res.data);
					console.log(datas, 'datas');

					if (datas.code == 1) {
						uni.showToast({
							title:that.$t('page_other.上传成功')
						});
						that.imgpath = that.imgpath.concat(datas.data)
					} else {
						uni.showToast({
							title: that.$t('page_other.上传失败'),
							icon: 'none'
						});
					}
				}
			});
		},

		//总体
		dianjishijian(e) {
			var that = this;
			var arrlist = that.arrlister;
			console.log(e.currentTarget.dataset.id, 'e.currentTarget.dataset.id');
			console.log(that.shuliang, 'that.data.shuliang?');

			if (e.currentTarget.dataset.id > that.shuliang) {
			} else {
				for (var j = 0; j < arrlist.length; j++) {
					arrlist[j].img = 'dzx_img57.png';
				}
			}

			that.shuliang = e.currentTarget.dataset.id;

			for (var i = 0; i < e.currentTarget.dataset.id; i++) {
				arrlist[i].img = 'dzx_img56.png';
				console.log(i, 'iiiii?');
			}

			that.arrlister=  arrlist
		},

		//速度
		dianjishijian2(e) {
			var that = this;
			var arrlist = that.arrlister2;

			if (e.currentTarget.dataset.id > that.shuliang2) {
			} else {
				for (var j = 0; j < arrlist.length; j++) {
					arrlist[j].img = 'dzx_img57.png';
				}
			}

			that.shuliang2 = e.currentTarget.dataset.id;

			for (var i = 0; i < e.currentTarget.dataset.id; i++) {
				arrlist[i].img = 'dzx_img56.png';
				console.log(i, 'iiiii?');
			}

			that.arrlister2= arrlist
		},

		//服务
		dianjishijian3(e) {
			var that = this;
			var arrlist = that.arrlister3;

			if (e.currentTarget.dataset.id > that.shuliang3) {
			} else {
				for (var j = 0; j < arrlist.length; j++) {
					arrlist[j].img = 'dzx_img57.png';
				}
			}

			that.shuliang3 = e.currentTarget.dataset.id;

			for (var i = 0; i < e.currentTarget.dataset.id; i++) {
				arrlist[i].img = 'dzx_img56.png';
				console.log(i, 'iiiii?');
			}

			that.arrlister3= arrlist
		},
		//服务
		dianjishijian4(e) {
			var that = this;
			var arrlist = that.arrlister4;
		
			if (e.currentTarget.dataset.id > that.shuliang4) {
			} else {
				for (var j = 0; j < arrlist.length; j++) {
					arrlist[j].img = 'dzx_img57.png';
				}
			}
		
			that.shuliang4 = e.currentTarget.dataset.id;
		
			for (var i = 0; i < e.currentTarget.dataset.id; i++) {
				arrlist[i].img = 'dzx_img56.png';
				console.log(i, 'iiiii?');
			}
		
			that.arrlister4= arrlist
		},
		dianjishijian5(e) {
			var that = this;
			var arrlist = that.arrlister5;
		
			if (e.currentTarget.dataset.id > that.shuliang5) {
			} else {
				for (var j = 0; j < arrlist.length; j++) {
					arrlist[j].img = 'dzx_img57.png';
				}
			}
		
			that.shuliang5 = e.currentTarget.dataset.id;
		
			for (var i = 0; i < e.currentTarget.dataset.id; i++) {
				arrlist[i].img = 'dzx_img56.png';
				console.log(i, 'iiiii?');
			}
		
			that.arrlister5= arrlist
		},

		jumpzuo() {
			uni.navigateBack();
		}
	}
};
</script>
<style>
@import './my_dingdan_qpj.css';
</style>
